import { formatGMTDate,  toPercent, compareObject } from '../../../../assets/js/util.js'
import echarts from 'echarts'
export default {
    data() {
        return {
            // loading
            loading: true,
            loading2: true,
            loading3: true,
            loading4: true,
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            // title
            title: "广告投放数据",
            xlsxTitle:'',
            xlsxTitleQ:'',
            /* 的宽*/
            pageWidth: '100%',
            pickerOptions: {
                shortcuts: [{
                    text: '最近7天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近15天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                         end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            // 请求参数
            postObj: {
                dstart: '',
                dend: ''
            },
            postObj2: {
                dstart: '',
                dend: ''
            },
            postObj3: {
                dstart: '',
                dend: ''
            },
            postObj4: {
                dstart: '',
                dend: ''
            },
            date: '',
            date2: '',
            date3: '',
            date4: '',
            // 分页一
            page1: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            // 分页一
            page2: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            page3: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            page4: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            tableHeaderAll21: [
                { "prop": "dateStr", "label": "投放时间", "width": '140px', 'fixed': true },
                { "prop": "actEquipment", "label": "设备激活", "width": '140px', 'fixed': false },
                { "prop": "newAccount", "label": "新增注册", "width": '140px', 'fixed': false },
                { "prop": "newPayUser", "label": "付费人数", "width": '140px', 'fixed': false },
                { "prop": "payrate", "label": "付费率", "width": '140px', 'fixed': false },
                { "prop": "d0Pay", "label": "D0付费额", "width": '160px', 'fixed': false },
                { "prop": "d1Pay", "label": "D1付费额", "width": '140px', 'fixed': false },
                { "prop": "d2Pay", "label": "D2付费额", "width": '140px', 'fixed': false },
                { "prop": "d6Pay", "label": "D6付费额", "width": '140px', 'fixed': false },
                { "prop": "d13Pay", "label": "D13付费额", "width": '140px', 'fixed': false },
                { "prop": "d29Pay", "label": "D29付费额", "width": '140px', 'fixed': false },
                { "prop": "d59Pay", "label": "D59付费额", "width": '140px', 'fixed': false },
                { "prop": "d89Pay", "label": "D89付费额", "width": '140px', 'fixed': false },
                { "prop": "d0LTV", "label": "D0日LTV", "width": '140px', 'fixed': false },
                { "prop": "d1LTV", "label": "D1日LTV", "width": '140px', 'fixed': false },
                { "prop": "d2LTV", "label": "D2日LTV", "width": '140px', 'fixed': false },
                { "prop": "d6LTV", "label": "D6日LTV", "width": '140px', 'fixed': false },
                { "prop": "d13LTV", "label": "D13日LTV", "width": '140px', 'fixed': false },
                { "prop": "d29LTV", "label": "D29日LTV", "width": '140px', 'fixed': false },
                { "prop": "d59LTV", "label": "D59日LTV", "width": '140px', 'fixed': false },
                { "prop": "d89LTV", "label": "D89日LTV", "width": '140px', 'fixed': false }
            ],
            tableHeaderAll22: [
                { "prop": "dateStr", "label": "投放时间", "width": '140px', 'fixed': true },
                { "prop": "url", "label": "广告URL", "width": '140px', 'fixed': false },
                { "prop": "agent", "label": "代理商名称", "width": '140px', 'fixed': false },
                { "prop": "channelName", "label": "投放渠道", "width": '140px', 'fixed': false },
                { "prop": "actEquipment", "label": "设备激活", "width": '140px', 'fixed': false },
                { "prop": "newAccount", "label": "新增注册", "width": '140px', 'fixed': false },
                { "prop": "newPayUser", "label": "付费人数", "width": '140px', 'fixed': false },
                { "prop": "payrate", "label": "付费率", "width": '140px', 'fixed': false },
                { "prop": "d0Pay", "label": "D0付费额", "width": '160px', 'fixed': false },
                { "prop": "d1Pay", "label": "D1付费额", "width": '140px', 'fixed': false },
                { "prop": "d2Pay", "label": "D2付费额", "width": '140px', 'fixed': false },
                { "prop": "d6Pay", "label": "D6付费额", "width": '140px', 'fixed': false },
                { "prop": "d13Pay", "label": "D13付费额", "width": '140px', 'fixed': false },
                { "prop": "d29Pay", "label": "D29付费额", "width": '140px', 'fixed': false },
                { "prop": "d59Pay", "label": "D59付费额", "width": '140px', 'fixed': false },
                { "prop": "d89Pay", "label": "D89付费额", "width": '140px', 'fixed': false },
                { "prop": "d0LTV", "label": "D0日LTV", "width": '140px', 'fixed': false },
                { "prop": "d1LTV", "label": "D1日LTV", "width": '140px', 'fixed': false },
                { "prop": "d2LTV", "label": "D2日LTV", "width": '140px', 'fixed': false },
                { "prop": "d6LTV", "label": "D6日LTV", "width": '140px', 'fixed': false },
                { "prop": "d13LTV", "label": "D13日LTV", "width": '140px', 'fixed': false },
                { "prop": "d29LTV", "label": "D29日LTV", "width": '140px', 'fixed': false },
                { "prop": "d59LTV", "label": "D59日LTV", "width": '140px', 'fixed': false },
                { "prop": "d89LTV", "label": "D89日LTV", "width": '140px', 'fixed': false }
            ],
            tableHeaderAll23: [
                { "prop": "dateStr", "label": "投放时间", "width": '140px', 'fixed': true },
                { "prop": "channelName", "label": "投放渠道", "width": '140px', 'fixed': false },
                { "prop": "actEquipment", "label": "设备激活", "width": '140px', 'fixed': false },
                { "prop": "newAccount", "label": "新增注册", "width": '140px', 'fixed': false },
                { "prop": "newPayUser", "label": "付费人数", "width": '140px', 'fixed': false },
                { "prop": "payrate", "label": "付费率", "width": '140px', 'fixed': false },
                { "prop": "d0Pay", "label": "D0付费额", "width": '160px', 'fixed': false },
                { "prop": "d1Pay", "label": "D1付费额", "width": '140px', 'fixed': false },
                { "prop": "d2Pay", "label": "D2付费额", "width": '140px', 'fixed': false },
                { "prop": "d6Pay", "label": "D6付费额", "width": '140px', 'fixed': false },
                { "prop": "d13Pay", "label": "D13付费额", "width": '140px', 'fixed': false },
                { "prop": "d29Pay", "label": "D29付费额", "width": '140px', 'fixed': false },
                { "prop": "d59Pay", "label": "D59付费额", "width": '140px', 'fixed': false },
                { "prop": "d89Pay", "label": "D89付费额", "width": '140px', 'fixed': false },
                { "prop": "d0LTV", "label": "D0日LTV", "width": '140px', 'fixed': false },
                { "prop": "d1LTV", "label": "D1日LTV", "width": '140px', 'fixed': false },
                { "prop": "d2LTV", "label": "D2日LTV", "width": '140px', 'fixed': false },
                { "prop": "d6LTV", "label": "D6日LTV", "width": '140px', 'fixed': false },
                { "prop": "d13LTV", "label": "D13日LTV", "width": '140px', 'fixed': false },
                { "prop": "d29LTV", "label": "D29日LTV", "width": '140px', 'fixed': false },
                { "prop": "d59LTV", "label": "D59日LTV", "width": '140px', 'fixed': false },
                { "prop": "d89LTV", "label": "D89日LTV", "width": '140px', 'fixed': false }
            ],
            tableHeaderAll24: [
                { "prop": "dateStr", "label": "投放时间", "width": '140px', 'fixed': true },
                { "prop": "agent", "label": "代理商名称", "width": '140px', 'fixed': false },
                { "prop": "actEquipment", "label": "设备激活", "width": '140px', 'fixed': false },
                { "prop": "newAccount", "label": "新增注册", "width": '140px', 'fixed': false },
                { "prop": "newPayUser", "label": "付费人数", "width": '140px', 'fixed': false },
                { "prop": "payrate", "label": "付费率", "width": '140px', 'fixed': false },
                { "prop": "d0Pay", "label": "D0付费额", "width": '160px', 'fixed': false },
                { "prop": "d1Pay", "label": "D1付费额", "width": '140px', 'fixed': false },
                { "prop": "d2Pay", "label": "D2付费额", "width": '140px', 'fixed': false },
                { "prop": "d6Pay", "label": "D6付费额", "width": '140px', 'fixed': false },
                { "prop": "d13Pay", "label": "D13付费额", "width": '140px', 'fixed': false },
                { "prop": "d29Pay", "label": "D29付费额", "width": '140px', 'fixed': false },
                { "prop": "d59Pay", "label": "D59付费额", "width": '140px', 'fixed': false },
                { "prop": "d89Pay", "label": "D89付费额", "width": '140px', 'fixed': false },
                { "prop": "d0LTV", "label": "D0日LTV", "width": '140px', 'fixed': false },
                { "prop": "d1LTV", "label": "D1日LTV", "width": '140px', 'fixed': false },
                { "prop": "d2LTV", "label": "D2日LTV", "width": '140px', 'fixed': false },
                { "prop": "d6LTV", "label": "D6日LTV", "width": '140px', 'fixed': false },
                { "prop": "d13LTV", "label": "D13日LTV", "width": '140px', 'fixed': false },
                { "prop": "d29LTV", "label": "D29日LTV", "width": '140px', 'fixed': false },
                { "prop": "d59LTV", "label": "D59日LTV", "width": '140px', 'fixed': false },
                { "prop": "d89LTV", "label": "D89日LTV", "width": '140px', 'fixed': false }
            ],
            tableData21: [],
            tableDataAll21: [],
            tableData22: [],
            tableDataAll22: [],
            tableData23: [],
            tableDataAll23: [],
            tableData24: [],
            tableDataAll24: [],
        }
    },
    methods: {
        // 通用 成功 与 失败
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        // 表格下载
        excel(tableIndex, sheet) {
            var that = this;
            that.xlsxTitle = sheet+"-"+that.xlsxTitleQ+"-"+that.postObj.dstart+"到"+that.postObj.dend;
            that.downloadExl(that['tableHeader' + tableIndex], that['tableData' + tableIndex],that.xlsxTitle, sheet)
        },
        // 时间改变 得到起始时间和结束时间
        dateChange(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj.dstart = t[0];
                this.postObj.dend = t[1];
                if (this.tableDataAll21.length !== 0) {
                    this.getData(this.postObj);
                }
            }
        },
        // 时间改变 得到起始时间和结束时间
        dateChange2(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj2.dstart = t[0];
                this.postObj2.dend = t[1];
                if (this.tableDataAll22.length !== 0) {
                    this.getData2(this.postObj2);
                }
            }
        },
        // 时间改变 得到起始时间和结束时间
        dateChange3(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj3.dstart = t[0];
                this.postObj3.dend = t[1];
                if (this.tableDataAll23.length !== 0) {
                    this.getData3(this.postObj3);
                }
            }
        },
        // 时间改变 得到起始时间和结束时间
        dateChange4(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj4.dstart = t[0];
                this.postObj4.dend = t[1];
                if (this.tableDataAll24.length !== 0) {
                    this.getData4(this.postObj4);
                }
            }
        },
        // 变成分数
        pencent(data) {
            //转换为%比 
            var arr = ['payrate']
            for (var i = 0; i < data.length; i++) {
                for (var j in data[i]) {
                    for (var n = 0; n < arr.length; n++) {
                        if (j === arr[n]) {
                            data[i][j] = toPercent(data[i][j]);
                        }
                    }
                }
            }
            return data
        },
        handleSizeChange1(val) {
            this.page1.pageSize = val;
            this.tableControl1();
        },
        handleCurrentChange1(val) {
            this.page1.currentPage = val;
            this.tableControl1();
        },
        tableControl1() {
            this.tableData21 = this.tableDataAll21.slice((this.page1.currentPage - 1) * this.page1.pageSize, this.page1.currentPage * this.page1.pageSize);
        },
        handleSizeChange2(val) {
            this.page2.pageSize = val;
            this.tableControl2();
        },
        handleCurrentChange2(val) {
            this.page2.currentPage = val;
            this.tableControl2();
        },
        tableControl2() {
            this.tableData22 = this.tableDataAll22.slice((this.page2.currentPage - 1) * this.page2.pageSize, this.page2.currentPage * this.page2.pageSize);
        },
        handleSizeChange3(val) {
            this.page3.pageSize = val;
            this.tableControl3();
        },
        handleCurrentChange3(val) {
            this.page3.currentPage = val;
            this.tableControl3();
        },
        tableControl3() {
            this.tableData23 = this.tableDataAll23.slice((this.page3.currentPage - 1) * this.page3.pageSize, this.page3.currentPage * this.page3.pageSize);
        },
        handleSizeChange4(val) {
            this.page4.pageSize = val;
            this.tableControl4();
        },
        handleCurrentChange4(val) {
            this.page4.currentPage = val;
            this.tableControl4();
        },
        tableControl4() {
            this.tableData24 = this.tableDataAll24.slice((this.page4.currentPage - 1) * this.page4.pageSize, this.page4.currentPage * this.page4.pageSize);
        },
        // 获取数据
        getData(data) {
            var that = this;
            that.loading = true;
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=getLtv`, {
                    params: { 'ps': `sday=${data.dstart}&eday=${data.dend}&uid=${localStorage.getItem('ZULONGBIUSERID')}` }
                }).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                that.tableData1 = [];
                var data = JSON.parse(value)
                var d = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(d["res"]) === 0) {
                    that.loading = false;
                    that.page1.dataTotal = d.ltvDate.length;
                    that.tableDataAll21 = d.ltvDate;
                    that.tableDataAll21.sort(compareObject('dateStr', false));
                    that.pencent(d.ltvDate);
                    that.tableControl1();
                } else {
                    that.getErrorMsg(Number(d.res))
                }
            })
        },
        // 获取数据2
        getData2(data) {
            var that = this;
            that.loading2 = true;
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=getLtvByUrl`, {
                    params: { 'ps': `sday=${data.dstart}&eday=${data.dend}&uid=${localStorage.getItem('ZULONGBIUSERID')}` }
                }).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                that.tableData2 = [];
                var data = JSON.parse(value)
                var d = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(d["res"]) === 0) {
                    that.loading2 = false;
                    that.page2.dataTotal = d.ltvDate.length;
                    that.tableDataAll22 = d.ltvDate;
                    that.tableDataAll22.sort(compareObject('newAccount', false));
                    that.pencent(d.ltvDate);
                    that.tableControl2();
                } else {
                    that.getErrorMsg(Number(d.res))
                }
            })
        },
        // 获取数据2
        getData3(data) {
            var that = this;
            that.loading3 = true;
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=getLtvByChannel`, {
                    params: { 'ps': `sday=${data.dstart}&eday=${data.dend}&uid=${localStorage.getItem('ZULONGBIUSERID')}` }
                }).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                that.tableData3 = [];
                var data = JSON.parse(value)
                var d = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(d["res"]) === 0) {
                    that.loading3 = false;
                    that.page3.dataTotal = d.channelltvDate.length;
                    that.tableDataAll23 = d.channelltvDate;
                    that.tableDataAll23.sort(compareObject('newAccount', false));
                    that.pencent(d.channelltvDate);
                    that.tableControl3();
                } else {
                    that.getErrorMsg(Number(d.res))
                }
            })
        },
        getData4(data) {
            var that = this;
            that.loading4 = true;
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=getLtvByAgent`, {
                    params: { 'ps': `sday=${data.dstart}&eday=${data.dend}&uid=${localStorage.getItem('ZULONGBIUSERID')}` }
                }).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                that.tableData4 = [];
                var data = JSON.parse(value)
                var d = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(d["res"]) === 0) {
                    that.loading4 = false;
                    that.page4.dataTotal = d.agentltvDate.length;
                    that.tableDataAll24 = d.agentltvDate;
                    that.tableDataAll24.sort(compareObject('newAccount', false));
                    that.pencent(d.agentltvDate);
                    that.tableControl4();
                } else {
                    that.getErrorMsg(Number(d.res))
                }
            })
        },
        // 表格排序
        sortChange(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll21.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll21.sort(compareObject(column.prop, true));
            }
            this.tableControl1();
        },
        // 表格排序
        sortChange2(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll22.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll22.sort(compareObject(column.prop, true));
            }
            this.tableControl2();
        },
        // 表格排序
        sortChange3(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll23.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll23.sort(compareObject(column.prop, true));
            }
            this.tableControl3();
        },
        sortChange4(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll24.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll24.sort(compareObject(column.prop, true));
            }
            this.tableControl4();
        }
    },
    computed: {
        // xlsx() {
        //     return this.title + '.xlsx'
        // }
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        this.date = [new Date(new Date().getTime() - 16 * 86400000), new Date(new Date().getTime() - 86400000)];
        this.postObj.dstart = formatGMTDate(new Date().getTime() - 86400000 * 16, true);
        this.postObj.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this.date2 = [new Date(new Date().getTime() - 16 * 86400000), new Date(new Date().getTime() - 86400000)];
        this.postObj2.dstart = formatGMTDate(new Date().getTime() - 86400000 * 16, true);
        this.postObj2.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this.date3 = [new Date(new Date().getTime() - 16 * 86400000), new Date(new Date().getTime() - 86400000)];
        this.postObj3.dstart = formatGMTDate(new Date().getTime() - 86400000 * 16, true);
        this.postObj3.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this.date4 = [new Date(new Date().getTime() - 16 * 86400000), new Date(new Date().getTime() - 86400000)];
        this.postObj4.dstart = formatGMTDate(new Date().getTime() - 86400000 * 16, true);
        this.postObj4.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this.getData(this.postObj);
        this.getData2(this.postObj2);
        this.getData3(this.postObj3);
        this.getData4(this.postObj4);
    }
}